<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 单位工程预验收记录编辑 -->
    <a-spin :spinning="loading[0] || loading[1]" id="base-breadcrumb" style="position: relative">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :rules="editModel != 0 ? rules : {}"
      >
        <!-- 项目信息 -->
        <base-info :form="form" :editModel="editModel"></base-info>
        <!-- 表格 -->
        <a-card :bordered="false" style="margin-bottom: 50px">
          <title-name title="验收信息"></title-name>
          <!-- 验收信息表单 -->
          <custom-form :formList="acceptanceList" :form="form" :editModel="editModel == 0 ? 'V' : ''"></custom-form>
          <!-- <a-row v-if="editModel == 0">
            <a-col :span="24">
              <a-form-model-item label="预验收小组成员及分工">
                <BaseInput type="textarea"  v-model="form.desc"></BaseInput>
              </a-form-model-item>
            </a-col>
          </a-row> -->
          <a-row type="flex" justify="center">
            <a-col :span="23">
              <a-button v-if="editModel != 0" class="mb12" type="primary" icon="plus" @click="handleManage(0)"
                >添加</a-button
              >
              <s-table
                ref="table"
                tableLayout="fixed"
                size="default"
                rowKey="index"
                :columns="columns"
                :data="loadData"
                :showPagination="false"
              >
                <!-- 表格行操作栏 -->
                <template slot="action" slot-scope="text, record">
                  <a @click="handleManage(1, record)">编辑</a>
                </template>
              </s-table>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
      <!-- 页脚操作栏 -->
      <div
        class="btn_box page-btn-right-top"
        style="position: fixed; bottom: 0; right: 50px; height: 50px; display: flex; align-items: center"
      >
        <a-button
          :disabled="loading[0] || loading[1]"
          v-if="editModel == 1 && statusCode === '0'"
          type="danger"
          class="button_right"
          @click="handleRemove"
          >删除草稿</a-button
        >
        <a-button
          :loading="loading[0]"
          :disabled="loading[1]"
          v-if="(editModel == 1 && (statusCode === '0' || statusCode === '3')) || editModel == 2"
          type="primary"
          class="button_right"
          @click="handleSubmit(0)"
          >保存草稿</a-button
        >
        <a-button
          :loading="loading[1]"
          :disabled="loading[0]"
          v-if="(editModel == 1 && (statusCode === '0' || statusCode === '3')) || editModel == 2"
          type="primary"
          class="button_right"
          @click="handleSubmit(1)"
          >提交</a-button
        >
        <a-button type="primary" @click="$multiTab.close()">关闭</a-button>
      </div>
    </a-spin>
    <DialogForm
      ref="dialogForm"
      @getOption="(name, e) => (option = e)"
      :visible.sync="visible"
      :editModel="['C', 'E'][model]"
      :form="forms"
      :headerTitle="['添加验收', '编辑验收'][model]"
      :width="600"
      :rules="rules"
      :formList="formList"
      @confirm="handleConfirm"
    />
  </base-breadcrumb>
</template>

<script>
import { record } from '@/api/quality/unitProject' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import DialogForm from '@/components/DialogForm' // 表单弹窗
import BaseInfo from '@/components/businessComponents/BaseInfo' // 基础信息
import Selector from '@/components/Select/Selector' // 选择器
import cloneDeep from 'lodash.clonedeep' // 深拷贝
import { STable } from '@/components' // 表格

export default {
  name:'a'+ Date.now(),
  extends: new BaseEditPage(),
  components: {
    BaseInfo,
    DialogForm,
    STable,
  },
  data() {
    return {
      loading: { 0: false, 1: false },
      editModel: 0,
      model: 0,
      id: '',
      form: {},
      forms: {},
      option: {},
      formList: [
        {
          type: 'a-input',
          keyName: 'part',
          label: '部位',
          span: 20,
        },
        {
          type: 'a-input',
          keyName: 'problem',
          label: '问题',
          span: 20,
        },
        {
          type: Selector,
          keyName: 'typeId',
          label: '类别',
          span: 16,
          attrs: {
            selectType: '17',
          },
        },
      ], // 表单列表
      acceptanceList: [
        {
          keyName: 'name',
          type: 'a-input',
          label: '工程名称',
          span: 8,
        },
        {
          keyName: 'acceptanceDate',
          type: 'a-date-picker',
          placeholder: '请选择日期',
          label: '预验收时间',
          span: 8,
          attrs: {
            valueFormat: 'YYYY-MM-DD',
            disabledDate: (current) => {
              return current && current < this.moment().startOf('day')
            },
          },
        },
        {
          keyName: 'isQualified',
          type: 'a-select',
          label: '预验收结果',
          span: 8,
          data: [
            {
              value: '0',
              label: '不合格',
            },
            {
              value: '1',
              label: '合格',
            },
          ],
        },
      ], // 验收表单列表
      visible: false, // 弹窗控件
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: '80px',
        },
        {
          title: '部位',
          dataIndex: 'part',
        },
        {
          title: '问题',
          dataIndex: 'problem',
        },
        {
          title: '类别',
          dataIndex: 'typeName',
        },
      ],
      statusCode: '', // 审批状态
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        if (this.editModel != 2) {
          this.loading[0] = true
          return record
            .getDetail({ id: this.id })
            .then((res) => {
              this.loading[0] = false
              if (res.code === 200) {
                this.form = cloneDeep(res.data)
                this.statusCode = res.data.statusCode
                res.data = res.data.preAcceptanceList.map((item, index) => {
                  item.index = index + 1
                  return item
                })
                return res
              }
            })
            .catch((res) => {
              this.loading[0] = false
            })
        }
      },
      sixMeasuresPlan: [],
      rules: {
        branchCompanyId: [{ required: true, message: '请选择分公司', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        name: [{ required: true, whitespace: true, message: '请输入工程名称', trigger: 'change' }],
        acceptanceDate: [{ required: true, message: '请选择预验收时间', trigger: 'change' }],
        isQualified: [{ required: true, whitespace: true, message: '请输入预验收结果', trigger: 'change' }],
        part: [{ required: true, whitespace: true, message: '请输入部位', trigger: 'change' }],
        problem: [{ required: true, whitespace: true, message: '请输入问题', trigger: 'change' }],
        typeId: [{ required: true, message: '请选择类别', trigger: 'change' }],
      },
    }
  },
  mounted() {
    this.$route.meta.title = ['单位工程预验收记录查看', '单位工程预验收记录编辑', '单位工程预验收记录添加'][
      this.editModel
    ]
    if (this.editModel != 0) {
      this.columns.push({
        title: '操作',
        dataIndex: 'action',
        width: '100px',
        align: 'center',
        scopedSlots: { customRender: 'action' },
      })
    }
  },
  methods: {
    /**
     * 操作验收信息
     */
    handleConfirm(e) {
      e.typeName = this.option.name
      // 添加
      if (this.model == 0) {
        e.index = this.$refs.table.localDataSource.length + 1
        this.$refs.table.localDataSource.push(e)
        // 编辑
      } else {
        this.$refs.table.localDataSource.forEach((item, index) => {
          if (e.index === item.index) {
            this.$set(this.$refs.table.localDataSource, index, e)
          }
        })
      }
      this.visible = false
    },
    /**
     * 删除草稿
     */
    handleRemove() {
      this.$confirm({
        title: '温馨提示',
        content: '确定删除草稿？',
        onOk: () => {
          return record.remove({ id: this.id }).then((res) => {
            this.$message.success('删除成功！')
            // 关闭当前页
            this.$multiTab.close()
          })
          // .catch((res) => {
          //   this.$message.warning('删除失败！')
          // })
        },
      })
    },
    /**
     * 提交表单
     */
    handleSubmit(e) {
      let that = this
      let name = ['update', 'create'][that.editModel - 1] // 根据操作切换url地址
      // 校验实施时间
      this.$refs.ruleForm.validate().then(() => {
        // 提交表单
        let form = Object.assign({}, this.form, {
          preAcceptanceList: this.$refs.table.localDataSource,
          statusCode: e,
        })
        that.loading[e] = true
        record[name](form)
          .then((res) => {
            that.loading[e] = false
            that.$message.success(['保存', '提交'][e] + '成功！')
            that.$multiTab.close()
          })
          .catch((res) => {
            // that.$message.warning(['保存', '提交'][e] + '失败!')
            that.loading[e] = false
          })
      })
    },
    /**
     * 操作表格
     */
    handleManage(a, b) {
      if (b) {
        this.forms = b
      } else {
        this.forms = {}
      }
      this.model = a
      this.visible = true
    },
  },
}
</script>